<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>遥感飞船</title>
  <style>
    body {
      background: gray;
    }

    #canvas {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <!-- https://juejin.im/post/5e0ea3eff265da5d597e1124 -->
  <canvas id="canvas" width="800" height="800" style="background:black;"><canvas>


      <script>

        class Ship {
          constructor() {
            this.x = 0
            this.y = 0
            this.v = 0
            this.angle = 0
            this.flag = false
          }
          draw(context) {
            if (this.x < 0) {
              this.x = context.canvas.width
            } else if (this.x > context.canvas.width) {
              this.x = 0
            }
            if (this.y < 0) {
              this.y = context.canvas.height
            } else if (this.y > context.canvas.height) {
              this.y = 0
            }
            if (this.v >= 20) {
              this.v = 20
            }
            let vx = this.v * Math.cos(this.angle)
            let vy = this.v * Math.sin(this.angle)
            this.x += vx
            this.y += vy
            context.save()
            context.translate(this.x, this.y)
            context.rotate(this.angle)
            context.beginPath()
            context.moveTo(-15, -10)
            context.lineTo(-15, 10)
            context.lineTo(10, 0)
            context.closePath()
            context.lineWidth = 2
            context.strokeStyle = "white"
            context.stroke()
            if (this.v > 0) {
              context.beginPath()
              context.moveTo(-15, -5)
              context.lineTo(-15 - this.v * (this.flag ? 1 : 3), 0)
              context.lineTo(-15, 5)
              context.closePath()
              context.stroke()
              this.flag = !this.flag
            }
            context.restore()
          }
        }

        class Control {
          constructor() {
            this.xTail = 0
            this.yTail = 0
            this.xHead = 0
            this.yHead = 0
            this.visible = false
          }
          draw(context) {
            if (!this.visible) return
            context.save()
            context.beginPath()
            context.strokeStyle = "cyan"
            context.lineWidth = 6
            context.arc(this.xTail, this.yTail, 40, 0, Math.PI * 2)
            context.stroke()
            context.beginPath()
            context.lineWidth = 2
            context.arc(this.xTail, this.yTail, 60, 0, Math.PI * 2)
            context.stroke()
            context.beginPath()
            context.arc(this.xHead, this.yHead, 40, 0, Math.PI * 2)
            context.stroke()
            context.restore()
          }
        }
        function captureMouse(element) {
          let mouse = { x: 0, y: 0 }
          element.addEventListener('mousemove', function (event) {
            let x = event.pageX - element.offsetLeft
            let y = event.pageY - element.offsetTop
            mouse.x = x
            mouse.y = y
          })
          return mouse
        }
        let context = canvas.getContext('2d')
        let ship = new Ship()
        ship.x = canvas.width / 2
        ship.y = canvas.height / 2
        let control = new Control()
        let mouse = captureMouse(canvas)

        canvas.addEventListener('mousedown', function () {
          control.xHead = control.xTail = mouse.x
          control.yHead = control.yTail = mouse.y
          control.visible = true
        })
        canvas.addEventListener('mousemove', function () {
          if (control.visible) {
            control.xHead = mouse.x
            control.yHead = mouse.y
            let dx = control.xHead - control.xTail
            let dy = control.yHead - control.yTail
            let d = Math.sqrt(dx * dx + dy * dy)
            ship.v = d * 0.1
            ship.angle = Math.atan2(dy, dx)
          }
        })
        canvas.addEventListener('mouseup', function () {
          control.visible = false
        });
        (function drawFrame() {
          window.requestAnimationFrame(drawFrame)
          context.clearRect(0, 0, canvas.width, canvas.height)
          ship.draw(context)
          control.draw(context)
        })()
      </script>

</body>

</html>